import {Component, ElementRef, ViewChild, OnInit} from "@angular/core";
import * as echarts from 'echarts';
import {FlowLineChartsConfig} from "../cash-flow.page/flow-line-echart.config";


@Component({
  selector: 'real-time-electricity',
  templateUrl: 'real-time-electricity.component.html'
})
export class RealTimeElectricityComponent implements OnInit {
  format: boolean = true;
  xAxisData: Array<string> = [];
  @ViewChild('realTimeElectricityChart', {read: ElementRef}) realTimeElectricityChart: ElementRef;
  constructor(
  ) {
    for (let i = 1; i <= 12; i++) {
      if (i.toString().length < 2) {
        this.xAxisData.push(`0${i}`);
      } else {
        this.xAxisData.push(`${i}`);
      }
    }
  }

  ngOnInit() {
    this.getRealTimeElectricityMap();
  }

  getRealTimeElectricityMap() {
    // const ec = echarts as any;
    // const realTimeElectricityChartContainer = this.realTimeElectricityChart.nativeElement;
    // let realTimeElectricityChartChart = ec.init(realTimeElectricityChartContainer);
    // realTimeElectricityChartChart.setOption(this.getConfigOpt());
    echarts.init(this.realTimeElectricityChart.nativeElement).setOption(this.getConfigOpt());
  }

  private getConfigOpt() {
    let option = FlowLineChartsConfig.config;
    let seriesData1: Array<any> = [];
    let seriesData2: Array<any> = [];
    let pointHasColor = {
      symbolSize: 12,
      itemStyle: {
        borderColor: '#89A6FF',
        borderWidth: 3
      }
    };
    let point = {
      symbolSize: 0
    };
    for (let i = 1; i <= 12; i++) {
      if (i === 1 || i === 12) {
        pointHasColor["value"] = (Math.random() * 100).toFixed(0);
        seriesData1.push(JSON.parse(JSON.stringify(pointHasColor)));
      } else {
        point["value"] = (Math.random() * 100).toFixed(0);
        seriesData1.push(JSON.parse(JSON.stringify(point)));
      }
    }
    for (let i = 1; i <= 12; i++) {
      if (i === 4) {
        let pointHasColor2 = pointHasColor;
        pointHasColor2["value"] = (Math.random() * 100).toFixed(0);
        pointHasColor2.itemStyle.borderColor = '#89A6FF';
        seriesData2.push(JSON.parse(JSON.stringify(pointHasColor2)));
      } else {
        point["value"] = (Math.random() * 100).toFixed(0);
        seriesData2.push(JSON.parse(JSON.stringify(point)));
      }
    }
    option.xAxis[0]["data"] = this.xAxisData;
    option.series[0]["data"] = seriesData1;
    option.series[1]["data"] = seriesData2;
    seriesData1 = null;
    seriesData2 = null;
    pointHasColor = null;
    point = null;
    return option;
  }
}
